<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <link rel="shortcut icon" href="assets/icon.ico" type="image/x-icon" />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <meta charset="utf-8">
    <title>VS Code Config Helper 3</title>
    <style>
        code {
            font-family: Consolas, 'Courier New', Courier, monospace;
        }

        .plain-text {
            color: rgba(0, 0, 0, .8);
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.375rem;
            letter-spacing: .0071428571em
        }

        dl {
            white-space: nowrap;
            overflow: auto;
        }

        dt {
            display: inline;
            font-weight: bold;
        }

        dt::after {
            content: '：';
        }

        dd {
            display: inline;
        }

        dd::after {
            content: '\a';
            white-space: pre;
        }
    </style>
</head>

<body>
    <div id="app">
        <v-app>
            <v-main>
                <v-container>
                    <v-row justify="center">
                        <v-col md="9">
                            <div class="text-h4 text-center pt-2">欢迎使用 VS Code Config Helper！</div>
                            <div class="subtitle-1 text-center pt-1">谷雨同学制作 · 版本 <code>{{backendVersion}}</code></div>
                        </v-col>
                    </v-row>
                    <v-row justify="center">
                        <v-col md="9">
                            <v-alert dense colored-border border="left" type="info" class="mb-0">
                                工具已经为您初步检测了系统环境，现在我们需要您提供一些信息。
                                <span v-if="latestVersion">（存在新版本 <code>{{latestVersion}}</code>，建议及时<a href="/index.html">更新</a>）</span>
                            </v-alert>
                        </v-col>
                    </v-row>
                    <v-row justify="center">
                        <v-col md="9">
                            <v-stepper v-model="currentStep" vertical shaped elevation="5" text>
                                <v-stepper-step :complete="currentStep > 1" step="1">
                                    VS Code 路径
                                    <small class="pt-1">确认您的 VS Code 安装情况</small>
                                </v-stepper-step>

                                <v-stepper-content step="1">
                                    <v-card flat>
                                        <v-card-text class="pa-0">
                                            <v-alert v-if="vscodeStatus === 'resolved'" dense text type="success">
                                                工具检测到您安装的 VS Code 路径如下。如没有任何问题，请点击下一步。</v-alert>
                                            <v-alert v-if="vscodeStatus === 'unresolved'" dense text type="warning">
                                                工具没有检测到您安装 VS Code，请您前往<a href="javascript:undefined" @click="getVscode">此处</a>下载安装。如果您安装了，请在下方提供其安装路径。
                                            </v-alert>
                                            <v-alert v-if="vscodeStatus === 'invalid'" dense text type="error">
                                                当前路径下没有检测到 VS Code（<code>Code.exe</code> 不存在）。
                                            </v-alert>
                                            <v-alert v-if="vscodeStatus === 'valid'" dense text type="success">
                                                当前路径下存在 VS Code。点击下一步以继续。
                                            </v-alert>
                                            <v-text-field v-model="vscodePath" clearable label="VS Code 安装路径" type="text" append-outer-icon="mdi-folder-open" @click:append-outer="getFolder(vscodePath, 'vscode')">
                                            </v-text-field>
                                        </v-card-text>
                                        <v-card-actions class="pa-0">
                                            <v-btn color="primary" :disabled="!vscodeOk" @click="next">
                                                下一步
                                            </v-btn>
                                            <v-spacer></v-spacer>
                                            <v-btn text color="error" @click="cancel">
                                                取消配置
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
                                </v-stepper-content>

                                <v-stepper-step :complete="currentStep > 2" step="2">
                                    MinGW 路径
                                    <small class="pt-1">下载或确认您的 MinGW</small>
                                </v-stepper-step>

                                <v-stepper-content step="2">
                                    <v-card flat>
                                        <v-card-text class="pa-1">
                                            <v-alert dense text type="success" v-if="compilers.length > 0">
                                                工具检测到您已经安装了以下 MinGW 编译环境。您可以选择其中一个，或者输入一个新的。
                                            </v-alert>
                                            <v-alert dense text type="warning" v-if="compilers.length === 0">
                                                工具未检测到您的 MinGW 编译环境。请您先手动下载 MinGW。
                                            </v-alert>
                                            <v-radio-group v-model="newCompiler" hide-details>
                                                <v-radio label="使用已安装的 MinGW……" :disabled="compilers.length === 0">
                                                </v-radio>
                                                <v-expand-transition>
                                                    <div v-show="newCompiler === 0" class="mb-2 ml-8">
                                                        <v-data-table dense hide-default-footer :headers="mingwTableHeader" :items="compilers" item-key="path" show-select single-select v-model="mingwTableSelected">
                                                        </v-data-table>
                                                    </div>
                                                </v-expand-transition>
                                                <v-radio label="使用新的 MinGW……"></v-radio>
                                                <v-expand-transition>
                                                    <div v-show="newCompiler === 1" class="ml-8">
                                                        <div class="d-flex align-center mb-2">
                                                            <div class="flex-grow-1 mr-4 plain-text">
                                                                若您未安装过 MinGW，请点击右侧按钮下载。下载并解压后，您将得到一个
                                                                <code>mingw64</code> 文件夹。建议您将它妥善保存在合适的位置（如
                                                                <code>C:\mingw64</code>），并在下方输入其路径。
                                                            </div>
                                                            <v-btn color="primary" text class="rounded-l-pill rounded-r-0" @click="download(mingwDlLinks[0].url)">
                                                                下载 MinGW
                                                            </v-btn>
                                                            <v-menu open-on-hover bottom offset-y>
                                                                <template v-slot:activator="{ on, attrs }">
                                                                    <v-btn v-bind="attrs" v-on="on" color="primary" icon :ripple="false" class="rounded-r-pill rounded-l-0">
                                                                        <v-icon>mdi-menu-down</v-icon>
                                                                    </v-btn>
                                                                </template>
                                                                <v-list dense two-line>
                                                                    <v-list-item v-for="(item, index) in mingwDlLinks" :key="index" link @click="download(item.url)">
                                                                        <v-list-item-content>
                                                                            <v-list-item-title>
                                                                                {{item.title}}
                                                                                <v-chip v-if="index === 0" color="green" pill outlined x-small>
                                                                                    推荐
                                                                                </v-chip>
                                                                            </v-list-item-title>
                                                                            <v-list-item-subtitle>
                                                                                {{item.subtitle}}
                                                                            </v-list-item-subtitle>
                                                                        </v-list-item-content>
                                                                    </v-list-item>
                                                                </v-list>
                                                            </v-menu>
                                                        </div>
                                                        <v-text-field v-model="newCompilerPath" clearable label="MinGW 路径" type="text" append-outer-icon="mdi-folder-open" @click:append-outer="getFolder(newCompilerPath, 'mingw')">
                                                        </v-text-field>
                                                        <v-alert v-if="newCompilerValid" dense text type="success">
                                                            检测到 MinGW：
                                                            <strong>版本</strong>
                                                            <code>{{newCompilerInfo?.version}}</code>，
                                                            <strong>包信息</strong>
                                                            <code>{{newCompilerInfo?.packageInfo}}</code>。
                                                        </v-alert>
                                                        <v-alert v-if="!newCompilerValid && newCompilerPath !== ''" dense text type="error">{{ newCompilerInvalidReason }}
                                                        </v-alert>
                                                    </div>
                                                </v-expand-transition>
                                            </v-radio-group>
                                            <v-alert v-if="mingwNot64Bit" dense text type="warning">
                                                此编译器不是 64 位的，可能导致调试时出现问题。
                                            </v-alert>
                                        </v-card-text>
                                        <v-card-actions class="pa-0">
                                            <v-btn color="primary" :disabled="!mingwOk" @click="next">
                                                下一步
                                            </v-btn>
                                            <v-btn text @click="prev">
                                                上一步
                                            </v-btn>
                                            <v-spacer></v-spacer>
                                            <v-btn text color="error" @click="cancel">
                                                取消配置
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
                                </v-stepper-content>

                                <v-stepper-step :complete="currentStep > 3" step="3">
                                    选择工作文件夹
                                </v-stepper-step>

                                <v-stepper-content step="3">
                                    <v-card flat>
                                        <v-card-text class="pa-0">
                                            <div class="plain-text">
                                                VS Code
                                                的配置大多在特定文件夹下生效，方便您为不同的语言和不同的需求个性化配置。因此，请选择一个<em>工作文件夹</em>，您将来的程序和代码<strong>都需要</strong>存放在此处。
                                            </div>
                                            <v-text-field v-model="workspacePath" clearable label="工作文件夹路径" type="text" append-outer-icon="mdi-folder-open" @click:append-outer="getFolder(workspacePath, 'workspace')">
                                            </v-text-field>
                                            <v-alert v-if="!isAscii(workspacePath)" dense text type="error">
                                                路径不能包含中文或特殊字符（仅能使用 ASCII 字符）。
                                            </v-alert>
                                            <v-alert v-if="isAscii(workspacePath) && workspaceStatus === 'warn'" dense text type="warning">
                                                此工作文件夹下已有配置。若继续则旧配置会被覆盖。
                                            </v-alert>
                                        </v-card-text>
                                        <v-card-actions class="pa-0">
                                            <v-btn color="primary" :disabled="!workspaceOk" @click="next">
                                                下一步
                                            </v-btn>
                                            <v-btn text @click="prev">
                                                上一步
                                            </v-btn>
                                            <v-spacer></v-spacer>
                                            <v-btn text color="error" @click="cancel">
                                                取消配置
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
                                </v-stepper-content>

                                <v-stepper-step step="4">
                                    详细设置
                                    <small class="pt-1">调整您的个性化设置</small>
                                </v-stepper-step>
                                <v-stepper-content step="4">
                                    <v-card flat>
                                        <v-card-text class="pa-0">
                                            <v-btn-toggle rounded dense mandatory class="ma-1" color="primary" v-model="optionsProfile">
                                                <v-btn @click="applyProfile('default')">
                                                    <v-icon small class="mr-1">mdi-settings</v-icon>使用默认设置
                                                </v-btn>
                                                <v-btn @click="applyProfile('newbie')">
                                                    <v-icon small class="mr-1">mdi-emoticon</v-icon>使用新手推荐设置
                                                </v-btn>
                                                <v-btn>
                                                    <v-icon small class="mr-1">mdi-format-list-bulleted</v-icon>使用自定义设置
                                                </v-btn>
                                            </v-btn-toggle>
                                            <v-expand-transition>
                                                <v-card class="ma-1" v-if="optionsProfile === 2">
                                                    <v-card-text class="pa-2">
                                                        <v-tabs fixed-tabs v-model="optionsTab" height="36">
                                                            <v-tab>目标语言</v-tab>
                                                            <v-tab>编译选项</v-tab>
                                                            <v-tab>调试设置</v-tab>
                                                            <v-tab>扩展设置</v-tab>
                                                            <v-tab>杂项</v-tab>
                                                        </v-tabs>
                                                        <v-tabs-items v-model="optionsTab" class="my-3">
                                                            <v-tab-item>
                                                                <v-radio-group row label="你将使用什么语言编写代码？" v-model="language">
                                                                    <v-radio label="C++ 语言"></v-radio>
                                                                    <v-radio label="C 语言"></v-radio>
                                                                </v-radio-group>
                                                                <v-select v-if="language === 0" dense outlined hide-details label="语言标准" :items="cppStandards" v-model="cppStandard"></v-select>
                                                                <v-select v-if="language === 1" dense outlined hide-details label="语言标准" :items="cStandards" v-model="cStandard"></v-select>
                                                                <v-switch hide-details class="mt-2" v-model="gnuEx" label="启用 GNU 扩展语法"></v-switch>
                                                            </v-tab-item>
                                                            <v-tab-item>
                                                                <v-select class="mt-5" dense outlined hide-details clearable label="优化级别" :items="['', '-O1', '-O2', '-O3', '-Ofast', '-Og']" v-model="optimization"></v-select>
                                                                <v-checkbox hide-details class="mt-2" v-model="wall" label="全部警告（-Wall）"></v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="wextra" label="额外警告（-Wextra）"></v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="werror" label="视警告为错误（-Werror）"></v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="fexecCharsetGbk" label="防止中文乱码（-fexec-charset=GBK）" :disabled="!enableGbk"></v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="staticStd" label="静态链接标准库（-static-libgcc，-static-libstdc++）">
                                                                </v-checkbox>
                                                                <v-combobox dense outlined hide-details class="mt-2" v-model="customOptions" label="其它自定义选项" multiple small-chips></v-combobox>
                                                            </v-tab-item>
                                                            <v-tab-item>
                                                                <v-radio-group hide-details label="调试样式" v-model="dbgStyle">
                                                                    <v-radio label="内置终端样式（默认）"></v-radio>
                                                                    <v-radio label="外部弹窗样式（仿 VS / Dev-C++）"></v-radio>
                                                                </v-radio-group>
                                                                <v-switch hide-details class="mt-2" v-model="nonAsciiCheck" label="调试中文文件名前给出警告">
                                                                </v-switch>
                                                            </v-tab-item>
                                                            <v-tab-item>
                                                                <v-switch hide-details class="mt-2" v-model="instL10n" label="安装中文语言包扩展"></v-switch>
                                                                <v-switch hide-details class="my-2" v-model="offlineExt" label="离线安装 C/C++ 扩展"></v-switch>
                                                                <div>
                                                                    在线安装 C/C++ 扩展会在第一次启用时从 GitHub 获取组件。如果您所在的地区访问 GitHub 存在困难，则建议启用该选项。
                                                                </div>
                                                                <v-switch hide-details class="my-2" v-model="uninstExt" label="卸载多余的 VS Code 扩展"></v-switch>
                                                                <div>
                                                                    为避免给新手的配置造成不必要的麻烦，我们将<strong class="red--text">卸载</strong>一些扩展。这些扩展要么不提供任何功能，要么会与我们的配置冲突并造成干扰。
                                                                    <a href="javascript:undefined" @click="showUninstList">卸载扩展列表</a>
                                                                </div>
                                                            </v-tab-item>
                                                            <v-tab-item>
                                                                <v-checkbox hide-details class="mt-2" v-model="setEnv" label="添加 MinGW 到 Path 环境变量"></v-checkbox>
                                                                <div class="d-flex align-center">
                                                                    <span class="v-label mr-3">是否生成测试文件？</span>
                                                                    <v-chip-group mandatory active-class="primary--text" v-model="genTest" class="flex-grow-1">
                                                                        <v-chip v-for="i in genTestText" :key="i" small>
                                                                            {{ i }}
                                                                        </v-chip>
                                                                    </v-chip-group>
                                                                </div>
                                                                <v-checkbox hide-details class="mt-0" v-model="genShortcut" label="生成桌面快捷方式"></v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="openVscode" label="配置完成后启动 VS Code">
                                                                </v-checkbox>
                                                                <v-checkbox hide-details class="mt-2" v-model="sendAnalytics" label="发送统计数据"></v-checkbox>
                                                            </v-tab-item>
                                                        </v-tabs-items>
                                                    </v-card-text>
                                                </v-card>
                                            </v-expand-transition>
                                        </v-card-text>
                                        <v-card-actions class="px-0 pb-0">
                                            <v-dialog v-model="confirmDiag" width="500">
                                                <template v-slot:activator="{ on, attrs }">
                                                    <v-btn color="success" v-bind="attrs" v-on="on">
                                                        下一步
                                                    </v-btn>
                                                </template>
                                                <v-card>
                                                    <v-card-title>确认</v-card-title>
                                                    <v-card-text>
                                                        <p class="subtitle-1">如无任何问题，请点击继续以完成配置。</p>
                                                        <dl>
                                                            <dt>VS Code 路径</dt>
                                                            <dd>{{ vscodePath }} </dd>
                                                            <dt>MinGW 路径</dt>
                                                            <dd>{{ mingw?.path }} </dd>
                                                            <dt>工作文件夹路径</dt>
                                                            <dd>{{ workspacePath }}</dd>
                                                            <dt>配置语言</dt>
                                                            <dd>{{ language === 0 ? 'C++' : 'C' }}</dd>
                                                            <dt>编译参数</dt>
                                                            <dd>{{ compileArgs.join(' ') }}</dd>
                                                            <dt>调试样式</dt>
                                                            <dd>{{ dbgStyle === 0 ? '内置终端样式' : '外部弹窗样式' }}</dd>
                                                            <dt>中文文件名警告</dt>
                                                            <dd>{{ nonAsciiCheck ? '是' : '否' }}</dd>
                                                            <dt>安装中文语言包扩展</dt>
                                                            <dd>{{ instL10n ? '是' : '否' }}</dd>
                                                            <dt>离线安装 C/C++ 扩展</dt>
                                                            <dd>{{ offlineExt ? '是' : '否' }}</dd>
                                                            <dt>卸载多余扩展</dt>
                                                            <dd :class="{ 'red--text' : uninstExt }">{{ uninstExt ? '是'
                                                                : '否' }}</dd>
                                                            <dt>设置环境变量</dt>
                                                            <dd>{{ setEnv ? '是' : '否' }}</dd>
                                                            <dt>生成测试文件</dt>
                                                            <dd>{{ genTestText[genTest] }}</dd>
                                                            <dt>生成桌面快捷方式</dt>
                                                            <dd>{{ genShortcut ? '是' : '否' }}</dd>
                                                            <dt>稍后启动 VS Code</dt>
                                                            <dd>{{ openVscode ? '是' : '否' }}</dd>
                                                            <dt>发送统计数据</dt>
                                                            <dd>{{ sendAnalytics ? '是' : '否' }}</dd>
                                                        </dl>
                                                    </v-card-text>
                                                    <v-card-actions>
                                                        <v-spacer></v-spacer>
                                                        <v-btn color="success" @click="finish">
                                                            继续
                                                        </v-btn>
                                                        <v-btn text @click="confirmDiag = false">
                                                            返回
                                                        </v-btn>
                                                    </v-card-actions>
                                                </v-card>
                                            </v-dialog>
                                            <v-btn text @click="prev" class="ml-2">
                                                上一步
                                            </v-btn>
                                            <v-spacer></v-spacer>
                                            <v-btn text color="error" @click="cancel">
                                                取消配置
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
                                </v-stepper-content>
                            </v-stepper>
                        </v-col>
                    </v-row>
                    <v-overlay :value="loading || configuring" :z-index="300">
                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-overlay>
                </v-container>
            </v-main>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/rxjs@6.6.7/bundles/rxjs.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-rx@6.2.0/dist/vue-rx.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.0/dist/vuetify.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script>
    <script src="config.js"></script>
</body>

</html>
